<template>
    <div class="register-container">
      <van-form @submit="submitForm" @failed="onFailed" ref="ruleFormRef" :model="form">
        <van-cell-group>
          <van-field
            v-model="form.username"
            label="账号："
            placeholder="请输入账号"
            clearable
            name="username"
            :rules="usernameRules"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="form.password"
            label="密码："
            placeholder="请输入密码"
            clearable
            type="password"
            name="password"
            :rules="passwordRules"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="form.confirmPassword"
            label="确认密码："
            placeholder="请再次输入密码"
            clearable
            type="password"
            name="confirmPassword"
            :rules="confirmPasswordRules"
          />
        </van-cell-group>
        <van-cell-group>
          <van-button block round type="primary" native-type="submit">注册</van-button>
        </van-cell-group>
      </van-form>
      <div class="tip">注册成功后的用户可用于登录</div>
    </div>
  </template>
  <script setup>
  import { ref, reactive } from 'vue';
  import { getUser, register } from '../api';
  import useToken from '../stores/token';
  import useUser from '../stores/user';
  import { useRouter } from 'vue-router';
  import config from '../config'; // 假设你有一个配置文件来存储基础 URL
  
  const { updateToken } = useToken();
  const { updateUser } = useUser();
  const form = reactive({
    username: '',
    password: '',
    confirmPassword: ''
  });
  const ruleFormRef = ref();
  const router = useRouter();
  
  // 定义验证规则
  const usernameRules = [
    { required: true, message: '用户名不能为空', trigger: 'onBlur' },
    { pattern: /^\w{3,16}$/, message: '用户名长度为 3-16 个字符', trigger: 'onBlur' }
  ];
  const passwordRules = [
    { required: true, message: '密码不能为空', trigger: 'onBlur' },
    { pattern: /^\w{6,24}$/, message: '密码必须为 6-24 位英文字母或数字', trigger: 'onBlur' }
  ];
  const confirmPasswordRules = [
    { required: true, message: '确认密码不能为空', trigger: 'onBlur' },
    { pattern: /^\w{6,24}$/, message: '确认密码必须为 6-24 位英文字母或数字', trigger: 'onBlur' },
    { validator: value => {
      if (value !== form.password) {
        return '两次输入的密码不一致';
      }
      return true;
    }}
  ];
  
  // 表单提交函数
  const submitForm = async () => {
    const data = await register(form);
    if (data) {
      updateToken(data.token);
      const user = await getUser();
      updateUser({
        isLogin: true,
        username: user.username,
        avatar: user.avatar !== '' ? config.baseURL + '/' + user.avatar : ''
      });
      router.push({ name: 'user' });
    }
  };
  
  const onFailed = errorInfo => {
    console.log('验证失败', errorInfo);
  };
  </script>
  <style lang="less" scoped>
  .register-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background-color: #f5f5f5;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .van-cell-group {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .van-field {
    border-bottom: 1px solid #e0e0e0;
    padding: 15px;
    font-size: 16px;
  
    &:last-child {
      border-bottom: none;
    }
  
    .van-field__label {
      width: 60px;
      color: #333;
    }
  
    .van-field__control {
      color: #333;
    }
  }
  
  .van-button {
    width: 100%;
    max-width: 400px;
    padding: 15px;
    font-size: 18px;
    border-radius: 24px;
    background-color: #07c160;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
  
    &:hover {
      background-color: #06b758;
    }
  }
  
  .tip {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    max-width: 400px;
    font-size: 14px;
    color: #666;
  }
  </style>

